<template>
  <div class="invesgoods">
    <div class="bgg">
      <div class="card_title">
        商品列表
      </div>
      <div class="groupbox" style="margin-bottom: 19px">

        <div class=" ">
          <a-space align="baseline">
            <span class="title">筛选小组：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择状态"
              @change="handleChange"
              v-model="group_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">组员：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择组员"
              @change="handleChange"
              v-model="user_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">商品状态：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择商品状态"
              @change="statusChange"
              v-model="status"
              allowClear
            >
              <a-select-option :value="0">
                全部商品
              </a-select-option>
              <a-select-option :value="1">
                正常商品
              </a-select-option>
              <a-select-option :value="2">
                被挖商品
              </a-select-option>
            </a-select>
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">活动id：</span>
            <a-input v-model="eventId" placeholder="活动id" class="ipt br4"/>
            <span class="title">商品id：</span>
            <a-input v-model="goods_id" placeholder="商品id" class="ipt br4"/>
            <span class="title">店铺：</span>
            <a-input v-model="shopTitle" placeholder="店铺名称" class="ipt br4"/>
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">排期开始时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <span class="title">排期结束时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange2"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <a-button
              type="primary"
              :disabled="btnloading"
              size="small"
              class="br4"
              @click="getWebGoods(1)">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'搜索中...':'搜索' }}
            </a-button>
          </a-space>
        </div>
      </div>
      <div class="invesgoodstable">
        <a-table
          :columns="columns"
          :rowKey="invesgoods => invesgoods.id"
          :dataSource="invesgoods"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pictUrl" slot-scope="text, row">
            <div class="goodsinfo">
              <img
                :src="row.pictUrl"
                alt=""
                srcset=""
                style="width:77px;height:77px;margin-right:15px;border-radius: 8px;"
              />
              <div class="info-right">
                <div class="line-1">
                  <a
                    :href="'https://detail.tmall.com/item.htm?id='+row.itemId"
                    target="_blank"
                    rel="noopener noreferrer"> {{ row.title }}</a>
                </div>
                <div class="flex row_bet" style="margin:8px 0;">
                  <span>￥{{ row.zkFinalPrice }}</span>
                  <div>
                    <span class="p_r_10"> 券后价 ￥{{ row.couponZkFinalPrice }}</span>
                    <span> 销量{{ row.biz30day }}</span>
                  </div>
                </div>
                <div class="flex row_bet">
                  <span>商品ID:{{ row.itemId }}</span> <span>店铺:{{ row.shopTitle }}</span>
                </div>
              </div>
            </div>
          </div>
          <div slot="new" slot-scope="text, row">
            <div :style="{color:row.new!=='0'?'#FF0303':'#39C15B'}">
              {{ row.new=='0'? '正常':'被翘'+row.new+'%' }}
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>
          <div slot="commissionRate" slot-scope="text, row">
            <div style="color: #2396F9">{{ row.commissionRate }}%</div>
          </div>
          <div slot="serviceRate" slot-scope="text, row">
            <div style="color: #2396F9">{{ row.serviceRate }}%</div>
          </div>
          <div slot="alipayNum" slot-scope="text, row">
            <div>有效订单数：{{ row.alipayNum }}</div>
            <div>预估服务费：{{ row.serviceFee }}</div>
          </div>
          <div slot="active" slot-scope="row">
            <div>
              <a-button type="link" @click="goedit(row)">详情</a-button>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWebGoods } from '@/api/admin/investment'
  import moment from 'moment'

  export default {
    name: 'Invesgoods',
    data () {
      return {
        moment,
        classList: [],
        shopTitle: '',
        goods_id: '',
        eventId: '',
        user_id: '',
        group_id: '',
        start: '', // 排期开始
        end: '', // 排期开始
        start_time: '', // 排期结束
        end_time: '', // 排期结束
        search: '',
        status: {
          key: 0,
          label: '全部商品'
        },
        pagination: {
          pageSize: 15,
          page: 1
        },
        columns: [
          {
            title: '用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user ' }
          },
          {
            title: '商品信息',
            dataIndex: 'pictUrl',
            scopedSlots: {
              customRender: 'pictUrl'
            }
          },
          {
            title: '商品状态',
            dataIndex: 'new',
            scopedSlots: {
              customRender: 'new'
            }
          },
          {
            title: '活动ID',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '佣金比例',
            // dataIndex: 'commissionRate',
            scopedSlots: {
              customRender: 'commissionRate'
            }
          },
          {
            title: '服务费率',
            // dataIndex: 'serviceRate',
            scopedSlots: {
              customRender: 'serviceRate'
            }
          },
          {
            title: '通过时间',
            dataIndex: 'passDate',
            scopedSlots: {
              customRender: 'passDate'
            }
          },
          {
            title: '优惠券',
            dataIndex: 'couponZkFinalPrice',
            scopedSlots: {
              customRender: 'couponZkFinalPrice'
            }
          },
          {
            title: '出单统计',
            // dataIndex: 'serviceRate',
            scopedSlots: {
              customRender: 'alipayNum'
            }
          }
        ],
        invesgoods: [
          // {
          //   user: '张晨光', // 用户
          //   id: 1444289, // 商品自增id
          //   pictUrl: '//img.alicdn.com/bao/uploaded/i1/2184747658/O1CN01hb6VfY26RPhrpZ6Dn_!!2184747658-0-picasso.jpg', // 图片
          //   title: '拍下减+保温杯+惊喜】凯镛牌芦荟胶囊 0.4g/粒*40粒/瓶 通便 cx', // 标题
          //   zkFinalPrice: '78.00', // 原价
          //   couponZkFinalPrice: '78.00', // 卷后价
          //   biz30day: 431, // 30 天销量
          //   itemId: '580034620504', // 商品id
          //   shopTitle: '幸福村大药房旗舰店', // 店铺名称
          //   eventId: '386807825', // 活动id
          //   startTime: '2020-11-13', // 开始时间
          //   endTime: '2020-12-13', // 结束时间
          //   commissionRate: '20.00', // 佣金比例
          //   serviceRate: '5.00', // 服务费比例
          //   passDate: '2020-11-13', // 上皮通过时间
          //   alipayNum: 0, // 支付笔数
          //   serviceFee: '0.00', // 预估服务费
          //   new: '0' // 最新佣金比例 不为0即是翘单
          // }
        ],
        loading: false,
        btnloading: false
      }
    },
    computed: {},
    created () {
      this.getWebGoods(1)
    },
    mounted () {
    },
    methods: {
      statusChange (value) {
        console.log(value, this.status) //
      },
      openimg (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      goedit (row) {
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/gather/invesgoods/gatherInfo'
        })
      },
      handleChange (value) {
        console.log(value, this.status) //
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      passChange2 (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start_time = dates[0].unix()
        this.end_time = dates[1].unix()
        console.log(this.start_time, this.end_time)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      getWebGoods (page) {
        this.loading = true
        this.btnloading = true
        getWebGoods({
          group_id: this.group_id,
          user_id: this.user_id,
          eventId: this.eventId,
          goods_id: this.goods_id,
          shopTitle: this.shopTitle,
          status: this.status.key, // 1有效活动2失效活动
          start: this.start,
          end: this.end,
          start_time: this.start_time,
          end_time: this.end_time,
          page: page,
          pagesize: 15
        }).then(res => {
          console.log('列表', res)
          this.invesgoods = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.total
          this.pagination = pagination
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebGoods(params.page)
      }
    }
  }
</script>
<style lang="less" scoped>
  .invesgoods {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }

    .goodsinfo {
      display: flex;

      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }
  }
</style>
